<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Taxis</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery-2.0.3.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>	
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->		
	</head>

	<body tiles:fragment="content">	
	<link href="../../static/datepicker/datepicker.css" th:href="@{/static/datepicker/datepicker.css}" rel="stylesheet" />	
	<link href="../../static/handsontable/jquery.handsontable.full.css" th:href="@{/static/handsontable/jquery.handsontable.full.css}" rel="stylesheet" />

			<div class="breadcrumbs" id="breadcrumbs">
				<script type="text/javascript">
					try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
				</script>
				<ul class="breadcrumb">
					<li>
						<i class="fa fa-home home-icon"></i>								
						<a href='/' th:href="@{/}">Inicio</a>
					</li>
					<li>
						<a href="/serviciosRecientes" th:href="@{/serviciosRecientes}">Reserva de Servicios</a>
					</li>
					<li class="active">Asignar Unidad</li>
				</ul><!-- .breadcrumb -->
			</div>			
			<div class="page-content">
				<div class="page-header">
					<h1>
						Orden de Servicio
						<small>
							<i class="fa fa-angle-double-right"></i>
							Detalle del servicio pendiente
						</small>
					</h1>
				</div><!-- /.page-header -->
				<div class="row">
					<div class="col-xs-12">						
						<div class="col-sm-11">
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<h4>Informaci&oacute;n del servicio</h4>
								</div>
	
								<div class="widget-body">
									<div class="widget-main">
										<div class="row">
											<div class="col-xs-12">
												<div class="col-xs-12">
													<input type="hidden" id="codigoOrden" th:value="${ordenServicio.numReserva}"/>
													<div class="col-xs-2 ">
														Empresa:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.pasajero.empresa.razonSocial}">Deloitte</p>
													</div>
													<div class="col-xs-4 col-xs-offset-3">
														<div class="col-xs-6 text-right">
															Reserva:
														</div>
														<div class="col-xs-6">
															<p th:text="${ordenServicio.numReserva}">1234</p>
														</div>
													</div>
												</div>
												<div class="col-xs-12">
													<div class="col-xs-2 ">
														Solicitante:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.solicitante.login}">cp</p>
													</div>
												</div>
												<div class="col-xs-12">
													<div class="col-xs-2 ">
														Pasajero:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.pasajero.nombreCompleto}">Pedro Lopez</p>
													</div>
													<div class="col-xs-3">
														<div class="col-xs-6 text-right">
															Doc. Id.:
														</div>
														<div class="col-xs-6">
															<p th:text="${ordenServicio.pasajero.numDocumento}">84623487</p>
														</div>
													</div>
													<div class="col-xs-4">
														<div class="col-xs-6 text-right">
															Celular:
														</div>
														<div class="col-xs-6">
															<p th:text="${ordenServicio.pasajero.todosTelefonos}">992757363</p>
														</div>
													</div>
													
												</div>
											</div>											
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2 ">
														Fecha reserva:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.fechaServicio}">10/10/2010</p>
													</div>
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2 ">
														Tipo de servicio:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.tipoServicio}">Punto a punto</p>
													</div>
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2">
														Origen:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.puntoOrigen.zona.nombre + ' - ' + ordenServicio.puntoOrigen.direccion}">San Miguel - Av La Marina XXX</p>
														<input type="hidden" id="latitudOrigen" th:value="${ordenServicio.puntoOrigen.latitud}"/>
														<input type="hidden" id="longitudOrigen" th:value="${ordenServicio.puntoOrigen.longitud}"/>
													</div>
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2">
														<p>Destinos:</p>
													</div>													
													<div class="col-xs-12">
														<div class="table-responsive">
															<table id="tabla-destinos" class="table table-bordered table-hover table-striped">
																<thead>
																	<tr>
																		<th>Nro</th>
																		<th>Direcci&oacute;n</th>
																		<th>Hora Partida</th>
																		<th>Hora Llegada</th>
																		<th>Peaje S/.</th>
																		<th>Estac. S/.</th>
																		<th>Espera min.</th>
																		<th>Espera S/.</th>
																		<th>Por Hora hor.</th>
																		<th>Tarifa S/.</th>
																		<th>Total S/.</th>
																		<th>Latitud</th>
																		<th>Longitud</th>
																	</tr>
																</thead>
																<tbody>
																	<tr th:each="destino, rowStat : ${ordenServicio.destinos}">
																		<td th:text="${rowStat.index + 1}">1</td>
																		<td th:text="${destino.puntoDestino.zona.nombre} + ' - ' + ${destino.puntoDestino.direccion}">Comas 1 - Calle Beta Mz. M</td>
																		<td th:text="${destino.horaInicioDestino} ? ${#dates.format(destino.horaInicioDestino, #messages.msg('date.formatHora'))}">14:30</td>
																		<td th:text="${destino.horaLlegadaDestino} ? ${#dates.format(destino.horaLlegadaDestino, #messages.msg('date.formatHora'))}">14:30</td>
																		<td th:text="${destino.peaje}">10.00</td>
																		<td th:text="${destino.estacionamiento}">10.00</td>
																		<td th:text="${ordenServicio.getDemoraDestino(__${rowStat.index}__)}"> 0</td>
																		<td></td>
																		<td th:text=" ${ordenServicio.tipoServicio != 'punto a punto' and ordenServicio.tipoServicio != 'courier'} ? ${destino.totalHoras}"> 0</td>
																		<td th:text="${destino.tarifa}">10.00</td>
																		<td th:text="${destino.totalTarifa}">30.00</td>
																		<td th:text="${destino.puntoDestino.latitud}">10.4334543456</td>
																		<td th:text="${destino.puntoDestino.longitud}">-10.4235423536</td>
																	</tr>
																</tbody>
															</table>
														</div>
													</div>
													<div class="col-xs-4">
														<div class="control-group">				
															<div class="radio">
																<label>
																	<input disabled="" name="form-field-radio" type="radio" class="ace" th:checked="${ordenServicio.tipoPago == 'Contado' ? 'true' : 'false'}" />
																	<span class="lbl"> pago al contado</span>
																</label>
															</div>
															<div class="radio">
																<label>
																	<input disabled="" name="form-field-radio" type="radio" class="ace" th:checked="${ordenServicio.tipoPago == 'Credito' ? 'true' : 'false'}" />
																	<span class="lbl"> pago al cr&eacute;dito</span>
																</label>
															</div>
														</div>
													</div>
													<div class="col-xs-5 col-xs-offset-3">
														<div class="space"></div>
														<div class="col-xs-4">
															Total
														</div>
														<div class="col-xs-8 text-right">
															S/. <span th:text="${ordenServicio.totalServicio != null ? ordenServicio.totalServicio : '--'}">10.00</span>
														</div>
														<div class="col-xs-4 ">
															Total hh:mm
														</div>
														<div class="col-xs-4">
															<span th:text="${ordenServicio.totalHoras}">1.27</span>
														</div>
														<div class="col-xs-4 text-right">
															S/. <span>0.00</span>
														</div>
														<div class="col-xs-4">
															Total d&iacute;as
														</div>
														<div class="col-xs-4">
															<span th:text="${ordenServicio.totalDias}">0</span>
														</div>
														<div class="col-xs-4 text-right">
															S/. <span>0.00</span>
														</div>
														<div class="col-xs-4">
															<strong>Total</strong>
														</div>
														<div class="col-xs-8 text-right">
															<strong>S/. <span th:text="${ordenServicio.totalServicio != null ? ordenServicio.totalServicio : '--'}">10.00</span></strong>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>												
												<div class="col-xs-6" >
													<div class="row" id="subViewUnidad"></div>	
													<div class="col-xs-12">
														<button type="submit" id="btnVerUnidades" class="btn btn-primary btn-sm">
															<i class="fa fa-road align-top bigger-150"></i>
															<span>Seleccionar Unidad</span>
														</button>
													</div>																									
												</div>
												<div class="col-xs-6">
													<div class="col-xs-4">
														<p>Rastro del servicio:</p>
													</div>													
													<div class="col-xs-12">
														<div id="map-canvas-ruta"></div>
													</div>													
													<div class="col-xs-12 btn-group">
														<div class="space"></div>
														<p>Estado:</p>
														No se ha localizado el veh&iacute;culo o la orden ha finalizado
													</div>	
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-11">
													<div>
														<p>Observaciones</p>
														<textarea th:text="${ordenServicio.observacion}" class="col-xs-12 col-sm-6 " rows="3" id="obs" readonly="readonly"></textarea>
													</div>													
												</div>
												<div class="col-xs-6">	
													<form th:action="@{/asignarUnidad}" method="POST" id="formSubmit">												
														<div class="col-xs-12 btn-group">
															<div class="space"></div>														
															<input type="hidden" id="campoUnidad" name="codigoUnidad" value="0"/>
															<input type="hidden" name="codigoOrden" th:value="${ordenServicio.numReserva}"/>
															<button type="submit" id="btnAsignarUnidad" class="btn btn-sm btn-success" disabled="disabled">
																<i class="fa fa-check align-top bigger-150"></i>
																Asignar Unidad
															</button>														
															<a href="/serviciosRecientes" th:href="@{/serviciosRecientes}" class="btn btn-sm btn-danger" >
																<i class="fa fa-times align-top bigger-150"></i>
																Cancelar
															</a>
														</div>
													</form>	
												</div>
											</div>
											<div id="modal-asignarUnidad" class="modal" tabindex="-1">
												<div class="space"></div>
												<div class="space"></div>
												<div class="space"></div>
												<div class="modal-content col-md-8 col-md-offset-2" >
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal">&times;</button>
														<h4 class="blue bigger">Unidades m&oacute;viles pr&oacute;ximas al punto de inicio</h4>
													</div>
										
													<div class="modal-body overflow-visible">
														<div class="row" id="subViewDiv"></div>
													</div>
										
													<div class="modal-footer">														
														<button type="button" id="btnSeleccionarUnidad" class="btn btn-sm btn-primary" disabled="disabled">
															<i class="fa fa-check"></i>
															Seleccionar
														</button>
														
														<button class="btn btn-sm" data-dismiss="modal">
															<i class="fa fa-times"></i>
															Cancelar
														</button>
													</div>
												</div>
										</div><!-- fin modal -->									
										</div>
									</div>
								</div>
							</div>																		
						</div>						
					</div>	
				</div>					
			</div><!-- /.page-content -->
		
		<style type="text/css">
				.navX{ max-height: 250px; overflow-y:scroll; }
				 #map-canvas-ruta  {
	       		 width: 100%;
	     	     height: 400px;
	    	     }
	    	     .pac-container {
				    background-color: #FFF;
				    z-index: 20;
				    position: fixed;
				    display: inline-block;
				    float: left;
				}
				.modal{
				    z-index: 20;   
				}
				.modal-backdrop{
				    z-index: 10;        
				}
		</style>
		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.2&amp;sensor=false&amp;channel=PE-MAPS&amp;language=es&amp;components=country:PE&amp;libraries=places"></script>
		
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
		
		<script th:inline="javascript">
		// <![CDATA[
		var mapRuta;
		var geocoder;
		var marker;
		var markerOrigen;
		var directionsDisplay;
		var directionsService = new google.maps.DirectionsService();
		var tablaDestinos;
		
		function initialize() {
			geocoder = new google.maps.Geocoder();
			directionsDisplay = new google.maps.DirectionsRenderer();
			var latlng = new google.maps.LatLng(-12.076871051369057, -76.99525272135588);
			var mapOptions = {
			    zoom: 17,
			    center: latlng
			}
		  
		    mapRuta = new google.maps.Map(document.getElementById('map-canvas-ruta'), {
			    center: new google.maps.LatLng(-33.8665433, 151.1956316),
			    zoom: 15
			  });
		  
		    var aOptions = {
		    		  types: ['(cities)'],
		    		  componentRestrictions: {country: "pe"}
		    		 };
		    		  
		  directionsDisplay.setMap(mapRuta);
		}		
		
		function calcRoute() {
			  var td = tablaDestinos.fnGetData().length;
			  var start = new google.maps.LatLng($('#latitudOrigen').val(), $('#longitudOrigen').val());
			  var end;
			  var waypts = [];
			  if(td == 0){
				  end = start;
			  } else {
				  end = new google.maps.LatLng(tablaDestinos.fnGetData(td-1)[11], tablaDestinos.fnGetData(td-1)[12]);
				  for (var i = 0; i < td-1; i++) {
					  waypts.push({location:new google.maps.LatLng(tablaDestinos.fnGetData(i)[11], tablaDestinos.fnGetData(i)[12]),stopover:true});
				  }				  
			  }

			  var request = {
			      origin: start,
			      destination: end,
			      waypoints: waypts,
			      travelMode: google.maps.TravelMode.DRIVING
			  };
			  
			  directionsService.route(request, function(response, status) {
			    if (status == google.maps.DirectionsStatus.OK) {
			      directionsDisplay.setDirections(response);
			      var route = response.routes[0];
			    } else {
			    	alert('Vista de Ruta no disponible para conjunto de direcciones');
			    }
			  });
		}
		
		google.maps.event.addDomListener(window, 'load', initialize);
		
		 $(document).ready(function(){			  
			  
			  tablaDestinos = $('#tabla-destinos').dataTable({
				  "aoColumns": [ 
								null,
								{"sWidth": "30%"},
								null,
								null,
								null,
								null,
								null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			{"bVisible": false},
				    			{"bVisible": false}
				    		],
				   "oLanguage": {
				          "sEmptyTable":     "El servicio no especifica destinos"
				      },
				   "bFilter": false,
				   "bInfo": false,
				   "bLengthChange": false,
				   "bPaginate": false,
				   "bSort": false				   
			  });
			  
			  tablaHistorial = $('#tabla-historial').dataTable({
				  "aoColumns": [
				                null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			null
				    		],
				   "oLanguage": {
				          "sEmptyTable":     "Pasajero no presenta historial"
				      },
				   "bFilter": false,
				   "bInfo": false,
				   "bLengthChange": false,
				   "bPaginate": false,
				   "bSort": false				   
			  });
			  calcRoute();
		 });	
		 
		 $("#btnVerUnidades").click(function() {
    		 codigoOrden = $("#codigoOrden").val();
    		 $.ajax({
    	            type: "GET",
    	            url: "/taxis/getUnidadesCercanas/" + codigoOrden,   
    	            success: function(response) {
    	                $("#subViewDiv").html( response );
    	                $('#modal-asignarUnidad').modal('show');
    	                $( "#campoUnidad").val(0);
    	                $( "#btnSeleccionarUnidad").prop('disabled', true);
    	            },
    	            error: function(xhr, status, err) {
    	            	alert(xhr.responseText);
                    }
    	     });		    		 

    	});
		 		 
		 $( "body" ).delegate( 'input[name="radUnidades"]', "click", function(){
			 $( "#campoUnidad").val(this.value);
			 $( "#btnSeleccionarUnidad").prop('disabled', false);
		 });
		 
		 $("#btnSeleccionarUnidad").click(function() {
    		 codigoUnidad = $("#campoUnidad").val();
    		 $.ajax({
    	            type: "GET",
    	            url: "/taxis/seleccionarUnidad/" + codigoUnidad,   
    	            success: function(response) {    	            	
    	                $("#subViewUnidad").html( response );
    	                $('#modal-asignarUnidad').modal('hide');
    	                $("#btnAsignarUnidad").prop('disabled', false);
    	            },
    	            error: function(xhr, status, err) {
    	            	alert(xhr.responseText);
                    }
    	     });		    		 

    	});
		 
			// ]]>
		</script>		
	</body>
</html>